<template>
	<!-- 评论点赞数量等 -->
	<view class="footer_box">

		<text class="comment_time">{{dataObj.createdDate| formatDate}}</text>

		<view class="footer_item">
			<image class="footer_opt_img" src="/static/article_share.png"></image>
		</view>
		
		
		<view class="footer_item" @click="toReply()">
			<text v-if="showReplyBtn" class="reply_btn">回复</text>
			<image v-else class="footer_opt_img" src="/static/icon/reply.png"></image>		
		</view>


		<view class="footer_item" style="display: flex;">
			<!-- 赞 -->
			<image v-if="dataObj.likeOrDis===1"  @click.stop="cancelLike('like')"
				class="footer_opt_img" src="/static/icon/liked.png"></image>
			<image v-else  @click.stop="like('like')" 
				class="footer_opt_img" src="/static/icon/unlike.png"></image>	
							
			<text class="footer_opt_txt" style="flex: 1;">{{dataObj.likeCount}}</text>
				
			<!-- 踩 -->				
			<image v-if="dataObj.likeOrDis===-1" @click.stop="cancelLike('dislike')"
				class="footer_opt_img" src="/static/icon/disliked.png"></image>
			<image v-else  @click.stop="like('dislike')"   
				class="footer_opt_img" src="/static/icon/undislike.png"></image>		
				
		</view>

	</view>
</template>

<script>
	export default {
		name: "commentFooter",
		props: {
			// 数据对象
			dataObj: {
				type: Object,
				default () {
					return {
						id: "",
						rootId: "",
						parentId: "",
						likeCount: 0,
						replyCount: 0,
						likeOrDis: null,
						createdDate: ""
					}
				}
			},
			// 是否需要返回当前数据对象
			needBackData: {
				type: Boolean,
				default () {
					return false
				}
			},
			// 是否显示回复按钮
			showReplyBtn: {
				type: Boolean,
				default () {
					return true
				}
			},
		},
		data() {
			return {
				// 提交中
				submiting: false
			}
		},	
		methods: {
			hasLogin() {
				return this.$authUtil.isLoginedin()
			},
			// 回复按钮
			toReply(){
				if(this.needBackData){
					this.$emit('replyBack',this.dataObj)
				}else{
					this.$emit('replyBack')
				}
			},
			// 赞或踩
			like(type) {
				if(this.submiting || !this.hasLogin()){
					return
				}
				this.submiting = true
				let url = null;
				if (this.dataObj.likeOrDis !==-1 && type === 'dislike'){
					// 踩
					url = 'user/dislike/reply/'
				} else if (this.dataObj.likeOrDis !==1 && type === 'like'){
					// 赞
					url = 'user/like/reply/';
				}
				if (url == null){
					return false
				}
				this.$httpApi.baseLikePost(url + this.dataObj.id, {}).then(({data}) => {
					if (data.code == "000000") {
						if (this.dataObj.likeOrDis !==-1 && type === 'dislike'){
							this.dataObj.likeCount = this.dataObj.likeCount + (this.dataObj.likeOrDis == 1?-2:-1)
							this.dataObj.likeOrDis = -1;
						} else if (this.dataObj.likeOrDis !==1 && type === 'like'){
							this.dataObj.likeCount = this.dataObj.likeCount + (this.dataObj.likeOrDis == -1?2:1)
							this.dataObj.likeOrDis = 1;
						}
					}
					this.submiting  = false
				}).catch(err => {
					this.submiting  = false
				})
			},
			// 取消赞或踩
			cancelLike(type) {
				if(this.submiting || !this.hasLogin()){
					return
				}
				this.submiting = true
				let url = null;
				// 取消踩
				if (this.dataObj.likeOrDis ===-1 && type === 'dislike'){					
					url = 'user/dislike/reply/';
				} else if (this.dataObj.likeOrDis ===1 && type === 'like'){
					// 取消赞
					url = 'user/like/reply/';
				}
				if (url == null){
					return false
				}
				this.$httpApi.baseLikeDelete(url + this.dataObj.id, {}).then(({data}) => {
					if (data.code == "000000") {
						if (this.dataObj.likeOrDis ===-1 && type === 'dislike'){
							this.dataObj.likeCount = this.dataObj.likeCount + 1
						} else if (this.dataObj.likeOrDis ===1 && type === 'like'){
							this.dataObj.likeCount = this.dataObj.likeCount - 1
						}
						this.dataObj.likeOrDis = null
						this.submiting  = false
					}
				}).catch(err => {
					this.submiting  = false
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.footer_box {
		display: flex;
		flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
		padding-top: 6px;
		padding-bottom: 10px;
		padding-right: 10px;
	}
	.comment_time {
		width: 100px;
		font-size: 12px;
		color: #999999;
	}
	.footer_item {
		display: flex;
		justify-content: center;
		margin: auto;
	}
	// 点赞、评论等图标
	.footer_opt_img {
		width: 18px;
		height: 18px;
		position: relative;
		text-align: center;
	}
	// 点赞、评论等数量
	.footer_opt_txt {
		text-align: center;
		line-height: 18px;
		font-size: 13px;
		color: #43484D;
		width: 50px;
	}
	.reply_btn {
		height: 18px;
		line-height: 18px;
		text-align: center;
		font-size: 10px;
		background-color: #cdcdcd;
		width: 30px;
		color: #999999;
		border-radius: 5px;
	}
	
	
</style>
